<template>
	<div>
	    <el-container>
	      <el-aside width="30%" style="text-align:center;">
			  <img
			    style="width: 20%;height: 80%;"
			    src="../assets/tubiao.png"
			    alt="Element logo"
			  />
			  </el-aside>
	      <el-main>
			  <div style="text-align: center;">
		   <el-input
		      v-model="data.search"
		      style="width: 50%;height: 2.6rem;"
		      placeholder="请输入内容"
		      clearable
		    />
			<el-button type="danger" style="background-color:  #E1337F;" size="large" :icon="Search"  @click="search()" >搜索</el-button>
		  </div>
		  </el-main>
	      <el-aside width="30%">
			  <div style="text-align: center;margin-top: 1rem;">
				<el-button type="danger" size="large" :icon="ShoppingCart" style="background-color: #E1337F;" @click="cart()">我的购物车</el-button>  
			  </div>
		  </el-aside>
	    </el-container>
	  </div>
	  <div style="height: 1.25rem;margin: 0 8rem;">
				<router-view v-if="data.search!=''" :key="route.fullPath"></router-view>
				<router-view v-if="data.search==''"></router-view>
					<hr />
			<bottom></bottom>
	  </div>

</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../router/index.js"
		import store from "../store/index.js"
		import {Search,ShoppingCart} from '@element-plus/icons-vue'
		import {success,warning,message,errors} from '../store/alert.js'
		import bottom from "../components/bottom.vue"
		import {useRoute} from "vue-router"
		const route = useRoute()
		const data=reactive({
			search:''
		})
		
		function search(){
			router.push({
				path: '/home/search',
				query: {
					sea: data.search
				}
			})
		}
		function cart(){
			if(store.state.user.uname==""){
				errors("未登录，请登录")
				return
			}
			router.push("/cus/mycart")
			
		}
		
		onMounted(()=>{
			store.state.gologin=true
			router.push("/home/com")
		})
		
</script>

<style>
	.demonstration {
	  color: var(--el-text-color-secondary);
	  
	}
	.demo-image .block {
	  padding: 30px 0;
	  text-align: center;
	  /* border-right: solid 1px var(--el-border-color); */
	  display: inline-block;
	  width: 20%;
	  box-sizing: border-box;
	  vertical-align: top;
	}
</style>
